<template>
  <div class='articleContent'>
    <!-- 标题栏 -->
    <van-nav-bar
      class="app-nav-bar"
      title="文章详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /标题栏 -->

    <div class="contentBox">
      <!-- 文章标题 -->
      <h1 class="title">{{ article.title }}</h1>
      <!-- /文章标题 -->

      <!-- 作者信息 -->
      <van-cell center>
        <van-image
          class="userImg"
          slot="icon"
          round
          fit="cover"
          :src="article.aut_photo"
        />
        <div class="userName" slot="title">
          {{ article.aut_name }}
        </div>
        <div class="updateDate" slot="label">
          {{ article.pubdate | relativeTime }}
        </div>
        <van-button
          class="followBtn"
          round
          :icon="article.is_followed ? '' : 'plus'"
          :type="article.is_followed ? '' : 'info'"
          :loading="isloadingFollowBtn"
          @click="onFollowings"
        >
          {{ article.is_followed ? '已关注' : '关注' }}
        </van-button>
      </van-cell>
      <!-- /作者信息 -->

      <!-- 文章内容 -->
      <div
        class="content markdown-body"
        v-html="article.content"
        ref="articleConten"
      >
      </div>
      <!-- /文章内容 -->

      <!-- 全部评论列表 -->
      <comment-list
        :source="articleId"
        :commentList="postSuccessComment"
        @commentNumber="commentNumber = $event"
        @update-reply="onUpdateReply"
      />
      <!-- /全部评论列表 -->
    </div>

    <!-- 底部评论、收藏、点赞栏 -->
    <van-cell class="bottomBar">
      <div slot="title">
        <van-button
          type="default"
          text="写评论"
          class="commentBtn"
          round
          center
          size="small"
          @click="showPopup"
        />
      </div>
      <div slot="default" class="bottomBarIcon">
        <van-badge :content="commentNumber" max="99" size="small">
          <van-icon name="chat-o" />
        </van-badge>
        <van-icon
          :name="article.is_collected ? 'star' : 'star-o'"
          :color="article.is_collected ? '#71AFFF' : ''"
          @click="onCollections"
        />
        <van-icon
          :name="article.attitude === 1 ? 'good-job' : 'good-job-o'"
          :color="article.attitude === 1 ? '#71AFFF' : ''"
          @click="onLikeing"
        />
        <van-icon name="share-o" />
      </div>
    </van-cell>
    <!-- /底部评论、收藏、点赞栏 -->

    <!-- 文章评论弹出层 -->
    <van-popup
      v-model="show"
      position="bottom"
    >
      <post-comment
        :target="articleId"
        @post-success="onPostSuccess"
      ></post-comment>
    </van-popup>
    <!-- /文章评论弹出层 -->

    <!-- 评论回复弹出层 -->
    <van-popup
      v-model="isCommentReplyPopShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <comment-reply
        v-if="isCommentReplyPopShow"
        :reply-comment="replyComment"
        :article-id="articleId"
        @closeCommentReplyPopShow="isCommentReplyPopShow = false"
      />
    </van-popup>
    <!-- 评论回复弹出层 -->
  </div>
</template>

<script>
import './github-markdown.css'
import commentList from './components/comment-list'
import postComment from './components/comment-post'
import CommentReply from './components/comment-reply'
import {
  getArticleResult,
  collectionsArticle,
  deleteCollectionsArticle,
  likeingArticle,
  deleteLikeingArticle
} from '@/api/article'
import { addFollowings, deleteFollowings } from '@/api/user'
import { ImagePreview, Toast } from 'vant'

export default {
  name: 'articleIndex',
  components: {
    commentList,
    postComment,
    CommentReply
  },
  props: {
    // 路由传过来的
    articleId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      article: [],
      isloadingFollowBtn: false,
      isCollections: false,
      commentNumber: 0, // 评论总数
      show: false,
      isCommentReplyPopShow: false,
      postSuccessComment: [],
      replyComment: {}
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadArticle()
  },
  mounted () {},
  methods: {
    // 获取文章
    async loadArticle () {
      const { data } = await getArticleResult(this.articleId)
      this.article = data.data
      // 将回调延迟到下次 DOM 更新循环之后执行
      this.$nextTick(function () {
        this.handleArticleImg()
      })
    },

    // 处理图片预览功能
    handleArticleImg () {
      const imgList = []
      const articleConten = this.$refs.articleConten
      const imgs = articleConten.querySelectorAll('img')
      imgs.forEach((img, index) => {
        imgList.push(img.src)
        img.onclick = function () {
          ImagePreview({
            images: imgList,
            startPosition: index
          })
        }
      })
    },

    // 关注和取消关注
    async onFollowings () {
      // 是否显示加载中的按钮。阻止用户在请求未完成前，多次点击，发送多个请求
      this.isloadingFollowBtn = true
      if (this.article.is_followed) {
        await deleteFollowings(this.article.aut_id)
      } else {
        await addFollowings(this.article.aut_id)
      }
      this.article.is_followed = !this.article.is_followed
      this.isloadingFollowBtn = false
    },

    // 收藏和取消收藏
    async onCollections () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      if (this.article.is_collected) {
        await deleteCollectionsArticle(this.article.art_id)
      } else {
        await collectionsArticle(this.article.art_id)
      }
      this.article.is_collected = !this.article.is_collected
      Toast.success(`${this.article.is_collected ? '' : '取消'}收藏成功`)
    },

    // 点赞和取消点赞
    async onLikeing () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      if (this.article.attitude === 1) {
        await deleteLikeingArticle(this.article.art_id)
        this.article.attitude = -1
      } else {
        await likeingArticle(this.article.art_id)
        this.article.attitude = 1
      }
      Toast.success(`${this.article.attitude === 1 ? '' : '取消'}点赞成功`)
    },

    // 文章评论弹出层
    showPopup () {
      this.show = true
    },

    // 评论发送成功后，动态显示评论
    onPostSuccess (comment) {
      this.postSuccessComment.unshift(comment)
      this.show = false
      this.commentNumber++
      console.log('我出现证明发送成功了')
    },

    onUpdateReply (comments) {
      this.isCommentReplyPopShow = true
      this.replyComment = comments
    }
  }
}
</script>
<style lang='less' scoped>
.contentBox {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow-y: auto;
  .title {
    color: #3a3a3a;
    font-size: 18px;
    background-color: #ffffff;
    padding: 16px;
    margin: 0;
  }
  .userImg {
    width: 45px;
    height: 45px;
    margin-right: 14px;
  }
  .userName {
    font-size: 14px;
    color: #333333;
  }
  .updateDate {
    font-size: 13px;
    color: #b4b4b4;
  }
  .followBtn {
    width: 78px;
    height: 30px;
    font-size: 13px;
  }
  .markdown-body {
    padding: 16px;
    /deep/ ul {
      list-style: unset;
    }
    /deep/ ol {
      list-style: decimal;
    }
  }
}
.bottomBar {
  position: fixed;
  bottom: 0;
  height: 50px;
  overflow: hidden;
  box-shadow:  10px 0px 4px #e4e4e4;
  .commentBtn {
    width: 160px;
    color: #777777;
  }
  .van-cell__value {
    overflow: unset;
    .bottomBarIcon {
      font-size: 24px;
      margin: 4px 0px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .badge-icon {
        display: block;
        font-size: 10px;
        line-height: 16px;
      }
    }
  }
}
</style>
